<template>
	<view>
		<form @submit="formSubmit" @reset="formReset">
					<view class="uni-form-item uni-column">
						<view class="title">商品名</view>
						<input class="uni-input" @input="onKeyInput" name="name" placeholder="请输入商品名" />
					</view>
					<view class="uni-form-item uni-column">
									<view class="title">商品单价（￥）</view>
									<input class="uni-input" @input="onKeyInput" type="digit" name="price" placeholder="请输入商品单价" />
								</view>
					<view class="uni-form-item uni-column">
									<view class="title">商品数量</view>
									<input class="uni-input" @input="onKeyInput" type="number" name="number" placeholder="请输入商品数量" />
								</view>
								
					
					
					<view class="uni-title uni-common-pl">选择开始日期</view>
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-left">
								当前选择
							</view>
							<view class="uni-list-cell-db">
								<picker mode="date" :value="startDate" :start="start" :end="end" @change="bindStartDateChange">
									<view class="uni-input">{{startDate}}</view>
								</picker>
							</view>
						</view>
					</view>
					<view class="uni-picker-tips">
						注：选择当前时间 ±10 年之间的时间, 不在区间内不能选中
					</view>
					
					<view class="uni-title uni-common-pl">选择开始时间</view>
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-left">
								当前选择
							</view>
							<view class="uni-list-cell-db">
								<picker mode="time" :value="startTime" @change="bindStartTimeChange">
									<view class="uni-input">{{startTime}}</view>
								</picker>
							</view>
						</view>
					</view>
					
					
					<view class="uni-title uni-common-pl end">选择结束日期</view>
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-left">
								当前选择
							</view>
							<view class="uni-list-cell-db">
								<picker mode="date" :value="endDate" :start="start" :end="end" @change="bindEndDateChange">
									<view class="uni-input">{{endDate}}</view>
								</picker>
							</view>
						</view>
					</view>
					<view class="uni-picker-tips">
						注：选择当前时间 ±10 年之间的时间, 不在区间内不能选中
					</view>
					<view class="uni-title uni-common-pl">选择结束时间</view>
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-left">
								当前选择
							</view>
							<view class="uni-list-cell-db">
								<picker mode="time" :value="endTime" @change="bindEndTimeChange">
									<view class="uni-input">{{endTime}}</view>
								</picker>
							</view>
						</view>
					</view>
					
					
					
					<view class="uni-btn-v">
						<button form-type="submit">
							提交
						</button>
						<button type="default" form-type="reset">清空</button>
					</view>
		</form>
	</view>
</template>

<script>
	
	function getDate(type) {
		const date = new Date();
	
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
	
		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;
	
		return `${year}-${month}-${day}`;
	}
	export default {
		data() {
			const currentDate = this.getDate({
			            format: true
			        })
			return {
				inputValue: '',
				date: getDate({
					format: true
				}),
				start:getDate('start'),
				end:getDate('end'),
				time: '12:01',
				
				startDate: getDate({
					format: true
				}),
				
				endDate: getDate({
					format: true
				}),
				
				startTime: '12:00',
				
				endTime: '12:00',
				
				submit_start_str: this.calStart(),
				submit_end_str: this.calEnd(),
				
			}
		},
		
		methods: {
			onKeyInput: function(event) {
			            this.inputValue = event.target.value
			        },
			
			bindStartDateChange: function(e) {
			            this.startDate = e.detail.value
						console.log(this.startDate)
						this.submit_start_str = this.calStart();
						console.log(this.submit_start_str);
						
			        },
			bindEndDateChange: function(e) {
			            this.endDate = e.detail.value
						console.log(this.endDate)
						this.submit_start_str = this.calEnd();
						console.log(this.submit_end_str);
			        },
			bindStartTimeChange: function(e) {
			            this.startTime = e.detail.value
						console.log(this.startTime);
						this.submit_start_str = this.calStart();
						console.log(this.submit_start_str);
			        },
			bindEndTimeChange: function(e) {
			            this.endTime = e.detail.value
						console.log(this.endTime)
						this.submit_start_str = this.calEnd();
						console.log(this.submit_end_str);
			        },
			calStart(){
				return this.startDate+" "+this.startTime;
			},
			calEnd(){
				return this.endDate+" "+this.endTime;
			},
			getDate(type) {
			            const date = new Date();
			            let year = date.getFullYear();
			            let month = date.getMonth() + 1;
			            let day = date.getDate();
			
			            if (type === 'start') {
			                year = year - 60;
			            } else if (type === 'end') {
			                year = year + 2;
			            }
			            month = month > 9 ? month : '0' + month;
			            day = day > 9 ? day : '0' + day;
			            return `${year}-${month}-${day}`;
			},
					
			formSubmit: function(e) {
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
					var formdata = e.detail.value
					uni.showModal({
						content: '表单数据内容：' + JSON.stringify(formdata),
						showCancel: false
					});
				},
			formReset: function(e) {
				console.log('清空数据')
			}
		}
	}
</script>

<style lang="scss">
	.uni-title {
		font-size:30rpx;
		font-weight:500;
		padding:20rpx 0;
		line-height:1.5;
	}
	.uni-common-pl{
		padding-left:30rpx;
	}
	.uni-list {
		background-color: #FFFFFF;
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.uni-list-cell {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.uni-list-cell-left {
	    white-space: nowrap;
		font-size:28rpx;
		padding: 0 30rpx;
	}
	.uni-list-cell-db,
	.uni-list-cell-right {
		flex: 1;
	}
	.uni-input {
		height: 50rpx;
		padding: 15rpx 25rpx;
		line-height:50rpx;
		font-size:28rpx;
		background:#FFF;
		flex: 1;
	}
	.end {
		margin-top: 30rpx;
	}

.uni-form-item{
	
	margin-top: 10rpx;

.uni-input{
	background-color: white;
}
.title {
		padding: 20rpx 0;
}}
.uni-picker-tips {
	font-size: 12px;
	color: #666;
	margin-bottom: 15px;
	padding: 0 15px;
	/* text-align: right; */
}
.uni-btn-v {
	margin-top: 40rpx;
}
</style>
